body {
    background: #fafafa;
    font-family: sans-serif;
  }
li{
    list-style: none;
}
ul{
    position: relative;
}
.container{
    max-width: 1300px;
    margin: 0 auto;
}
.btn{
    display: inline-block;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
    padding: .5em .8em;
    transition: box-shadow .05s ease-in-out;
    -webkit-transition: box-shadow .05s ease-in-out;
    user-select: none;
}
.btn.active{
    color: #fff;
    background:#409EFF;
}
.btn.add{
    float: right;
    background:#409EFF;
    color:#fff;
    border-radius: 5px;
}

.row{
    background:#fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2);
    padding:15px 10px ;
    position: absolute;
    width:100%;
    box-sizing: border-box;
    transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out, opacity .5s ease-out, left .5s ease-in-out;
}
.row>div{
    display: inline-block;
}
.row .rank{
    width:10%;
}
.row .title{
    width:20%;
}
.row .desc{
    width: 70%;;
}
.row .delete{
    position: absolute;
    right: 0;
    top:0;
    height: 20px;
    width:20px;
    cursor: pointer;
    background:red;
    color:#fff;
    line-height: 20px;
    text-align: center;
    border-radius: 2px;

}
